<template>
  <el-header style="height: 88px; border-bottom: 1px solid #ccc;">
    <el-row class="container clearfix">
      <el-col :span="4">
        <div class="dh-logo" v-for="(item,index) in logo" :key="index">
          <router-link to="/"><img v-if="item.img" :src="item.img"></router-link>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="nav" v-for="(item,index) in nav" :key="index">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-submenu index="1">
              <template><router-link :to="item.path" v-if="item.text1">{{item.text1}}</router-link></template>
              <el-menu-item v-for="(item,index) in list" :key="index">
                <router-link to="/"></router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
          <el-menu-item v-if="item.text2">
            <router-link :to="item.path">{{item.text2}}</router-link>
          </el-menu-item>
        </div>
      </el-col>
      <el-col :span="5">
        <router-link to="/Register"><div class="nav reg-log register">注册</div></router-link>
        <router-link to="/Login"><div class="nav reg-log login">主办方后台</div></router-link>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  data () {
    return {
      logo: [
        { img: require('@/assets/img/dh_logo.png') }
      ],

      nav: [
        { text1: '产品列表', path: '/product' },
        { text2: '服务案例', path: '/service' },
        { text2: '企业版', path: '/enterprise' },
        { text2: '帮助支持', path: '/help' }
      ],

      list: [
        { text: '标准版' },
        { text: '高级版' },
        { text: '企业版' },
        { text: '活动服务号' },
        { text: '活动小程序' },
        { text: '急速签到' }
      ],

      activeIndex: '1',
      activeIndex2: '1'
    }
  },

  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style>
 @import "~@/assets/css/header.css";
 @import "~@/assets/css/public.css";
</style>
